<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import baseCard from '@/components/base-card/index.vue'
import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";
import { HotTable } from '@handsontable/vue3';
import { setUrl } from "@/service/sseUrl";
import Papa from "papaparse";
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
registerAllModules();
registerCellType(NumericCellType);
registerPlugin(UndoRedo);

const router = useRouter()
const route = useRoute()

if (route.query.data) {
    const qd: any = route.query.data
    const str = decodeURIComponent(qd)
    const qdArr = JSON.parse(str)
    const queryData = ref()
    const showData = ref()
    queryData.value = qdArr
}
// console.log(queryData.value);
//定义handsontable的ref
const hotTableRef = ref<any>(null);
const excel = ref<any>([]);
    
const settings = ref<any>(
    {
        language: 'zh-CN', // 官方汉化
        licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明

        //colHeaders     
        colHeaders: [
            "病人姓名",
            "病人身份证号",
            "病人类型"
        ],

        //columns        
        // columns: [

        //     {
        //         data: "病人姓名",
        //         readOnly: false,
        //         type: "text",
        //         dateFormat: null,
        //         source: null,
        //         strict: false,
        //         numericFormat: null
        //     },
        //     {
        //         data: "病人身份证号",
        //         readOnly: false,
        //         type: "text",
        //         dateFormat: null,
        //         source: null,
        //         strict: false,
        //         numericFormat: null
        //     },
        //     {
        //         data: "病人类型",
        //         readOnly: false,
        //         type: "text",
        //         dateFormat: null,
        //         source: null,
        //         strict: false,
        //         numericFormat: null
        //     }
        // ],
        //data
        // data: [
        //     {
        //         "病人姓名": "测试",
        //         "病人身份证号": "123456789",
        //         "病人类型": "贫困户"
        //     },
        //     {
        //         "病人姓名": "张三",
        //         "病人身份证号": "369258147",
        //         "病人类型": "贫困户"
        //     }
        // ],
        currentRowClassName: 'currentRow', // 突出显示行
        currentColClassName: 'currentCol', // 突出显示列
        minSpareRows: 2, //行留白
        autoWrapRow: false, //自动换行
        minRows: 2100,
        trimWhitespace: false, //去除空格
        rowHeaderWidth: 100, //单元格宽度
        stretchH: 'all',
        renderAllRows: false,
        rowHeaders: true, // 行标题   布尔值 / 数组/  函数
        formulas: false, //公式
        copyable: true, // 允许键盘复制
        wordWrap: false, // 自动换行
        copyPaste: true, //复制粘贴
        filters: false, //允许通过内置组件或API过滤表数据
        search: false,
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        columnSorting: true, // 排序
        contextMenu: true, //右键菜单
    },
)


onMounted(() => {
    sseServiceOpen()
})
onUnmounted(() => {
    sseService.disconnect()
})




//see 链接
function sseServiceOpen() {
    console.log(sseService);

    const onopen = () => {
        console.log("建立无敌 sse 连接成功")
    }
    // 建立连接
    let sseChatParams: SSEChatParams = {
        onopen,
        url: setUrl('ddxsb'),//queryData.value['缩写']
        onmessage: (event: MessageEvent) => {
            // 收到消息
            console.log('收到消息菜单：', event.data);
            let fst = event.data.replace(/\\n/g, "\n")
            const pap = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
            console.log('解析解析', pap);
            // console.log(hotTableRef.value);setColHeaders
            settings.value.colHeaders = pap.meta.fields
            // settings.value.colHeaders = pap.meta.fields
            // let res = pap.data
            excel.value =  pap.data
            // let res = excel.value.concat(pap.data)||[]

            // excel.value = excel.value.concat(pap.data) ||[]
            console.log('excel.value',excel.value);

            hotTableRef.value.hotInstance.loadData(excel.value)
            // hotTableRef.value.hotInstance.updataData(excel.value)
           

            // directory.value = pap.data

            

        },
        finallyHandler: () => {
            console.log("finallyHandler操作")
        }
    };
    sseService.connect(sseChatParams)


}


</script>
<template>
    <baseCard title="EXCEL">
        <hot-table width="100%" height="500" :settings="settings" :data="excel" ref="hotTableRef"></hot-table>
    </baseCard>
</template>
<style src="./index.scss" scoped></style>